// axios的封装处理
import axios from "axios"
import { message, Spin } from 'antd'
import React from 'react'
import { createRoot } from 'react-dom/client'
import router from "@/router"


// 1. 根域名配置
// 2. 超时时间
// 3. 请求拦截器 / 响应拦截器

const request = axios.create({
  baseURL: 'http://localhost:5000'
})

// 当前正在请求的数量
let requestCount = 0

// 显示loading
function showLoading () {
  if (requestCount === 0) {
    var dom = document.createElement('div')
    dom.setAttribute('id', 'loading')
    document.body.appendChild(dom)
    const root = createRoot(dom) // 创建 root
    root.render(
      <div>
        <Spin size="large" tip="加载中">
        <div>
        </div>
        </Spin>
      </div>
    )
  }
  requestCount++
}

// 隐藏loading
function hideLoading () {
  requestCount--
  if (requestCount === 0) {
    document.body.removeChild(document.getElementById('loading'))
  }
}

// 添加请求拦截器
// 在请求发送之前 做拦截 插入一些自定义的配置 [参数的处理]
request.interceptors.request.use((config) => {
  // 操作这个config 注入token数据
  // 1. 获取到token
  // 2. 按照后端的格式要求做token拼接
  if (config.headers.isLoading !== false) {
    showLoading()
  }
  return config
}, (error) => {
  if (error.config.headers.isLoading !== false) {
    hideLoading()
  }
  return Promise.reject(error)
})

// 添加响应拦截器
// 在响应返回到客户端之前 做拦截 重点处理返回的数据
request.interceptors.response.use((response) => {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  // 判断当前请求是否设置了不显示Loading
  if (response.config.headers.isLoading !== false) {
    hideLoading()
  }
  return response.data
}, (error) => {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  // 监控401 token失效
  // console.log(error.code);
  // console.dir(error.code)

  if (error.config.headers.isLoading !== false) {
    hideLoading()
  }
  // if (error.code === 'ERR_NETWORK') {
  //   message.warning('网络连接异常！')
  // } else if (error.code === 'ECONNABORTED') {
  //   message.warning('请求超时，请重试！')
  // } else if (error.response && error.response.status === 401) {
  //   message.error('认证失败，请重新登录！')
  // } else if (error.response && error.response.status === 404) {
  //   message.error('请求的资源未找到！')
  // } else {
  //   message.error('发生未知错误，请稍后重试！')
  // }
  return Promise.reject(error)
})


export { request }



